<template>
  <div class="home-container">
    <h1>智能聊天平台</h1>
    <div class="chat-container">
      <ChatBox :messages="chatStore.messages" />
      <div class="input-area">
        <div class="top-controls">
          <ModelSelect v-model="chatStore.model" />
          <label>
            <input type="checkbox" v-model="chatStore.streamMode" disabled checked /> 流式输出
          </label>
        </div>
        <textarea v-model="input" rows="2" placeholder="输入消息..." @keydown.enter.exact.prevent="handleSend"
          :disabled="loading"></textarea>
        <button @click="handleSend" :disabled="loading">
          {{ loading ? '发送中...' : '发送' }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ChatBox from '../components/ChatBox.vue'
import ModelSelect from '../components/ModelSelect.vue'
import { useChatStore } from '../store/useChatStore'

const chatStore = useChatStore()
const input = ref('')
const loading = ref(false)

const handleSend = async () => {
  if (!input.value.trim()) return
  loading.value = true
  try {
    await chatStore.sendMessage(input.value.trim())
  } catch (err) {
    console.error('消息发送失败', err)
  } finally {
    input.value = ''
    loading.value = false
  }
}
</script>

<style scoped>
.home-container {
  max-width: 900px;
  margin: 20px auto;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

h1 {
  text-align: center;
  margin-bottom: 15px;
  color: #2563eb;
}

.chat-container {
  display: flex;
  flex-direction: column;
  height: 600px;
  border-radius: 12px;
  padding: 15px;
  background: #f5f7fa;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.input-area {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}

.top-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

textarea {
  resize: none;
  padding: 10px;
  font-size: 1rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  outline: none;
  transition: border-color 0.2s;
}

textarea:focus {
  border-color: #2563eb;
}

button {
  margin-top: 6px;
  padding: 8px 14px;
  font-size: 1rem;
  background-color: #2563eb;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

button:hover:not(:disabled) {
  background-color: #3b82f6;
}

button:disabled {
  background-color: #999;
  cursor: not-allowed;
}
</style>
